<script setup lang="ts">
import Tree from "./comm/Tree.vue";
import { IItem } from "./comm/type";
import { init, destory } from "./create";
import { onMounted, onUnmounted, reactive, ref } from "vue";


const list = ref<IItem[]>([]);

onMounted(() => {
    let menu = [
        {
            id: 1,
            label: 'Home',
        },
        {
            id: 2,
            label: 'Products',
            children: [
                {
                    id: 3,
                    label: 'Electronics',
                    children: [
                        {
                            id: 4,
                            label: 'Mobile Phones',
                        },
                        {
                            id: 5,
                            label: 'Laptops',
                        },
                    ],
                },
                {
                    id: 6,
                    label: 'Clothing',
                    children: [
                        {
                            id: 7,
                            label: 'Men',
                        },
                        {
                            id: 8,
                            label: 'Women',
                        },
                    ],
                },
            ],
        },
        {
            id: 9,
            label: 'About',
            children: [
                {
                    id: 10,
                    label: 'Company',
                },
                {
                    id: 11,
                    label: 'Team',
                },
                {
                    id: 12,
                    label: 'Us',
                },
            ],
        },
    ];

    // treeCall(menu, item=>{
    //     item.expand = false;
    //     item.selected = false;
    // })
    list.value = menu;
});

const onToggle = (obj: IItem) => {
    // let item = findMenuItem(list.value, obj);

    obj.expand = !obj.expand;
    // list.value[0].expand = !obj.expand;
    console.log(obj)
    // list.value.pop();
}

const onSelected = (obj: any) => {
    obj.selected = !obj.selected;
    if (obj.children) {
        treeCall(obj.children, (i: IItem) => {
            i.selected = obj.selected;
        })
    }

    let ps = getPath(list.value, obj.id, []);
    if (ps && ps.length > 1) {
        // console.log("ps", ps)
        // let citem = getObj(list.value, ps);
        // console.log("citem", citem);

        // ps.pop();
        for (let i = ps.length - 1; i > 0; i--) {
            let subArray = [];
            for (let j = 0; j < i; j++) {
                subArray.push(ps[j]);
            }
            console.log(subArray);
            let item: any = getObj(list.value, subArray);
            // console.log("find", item)
            item.selected = item.children.every((t: any) => t.selected);
        }

    }
}

function getObj(menu: IItem[], ps: number[]) {
    console.log("--ps", ps)
    let item: any = menu;
    for (let i = 0; i < ps.length; i++) {
        if (Array.isArray(item)) {
            item = item[ps[i]];
        }
        else {
            item = item.children[ps[i]];
        }
    }
    return item;
}

function getPath(menu: IItem[], id: number, path: number[] = []) {
    for (let i = 0; i < menu.length; i++) {
        const item = menu[i];
        if (item.id === id) {
            return [...path, i];
        }

        if (item.children) {
            const childPath: any = getPath(item.children, id, [...path, i]);
            if (childPath) {
                return childPath;
            }
        }
    }

    return null;
}


function treeCall(menu: IItem[], fun: Function) {
    for (const item of menu) {
        fun(item);
        if (item.children) {
            treeCall(item.children, fun);
        }
    }
}

</script>

<template>
    <div class="page">
        <canvas ref="canvas"></canvas>
        <div class="box">
            <Tree :list="list" :level="0" @selected="onSelected" @toggle="onToggle"></Tree>
        </div>
    </div>
    
</template>

<style lang="less" scoped>
@import url("./index.less");
</style>
